<jsp:include page="../template/top.jsp"></jsp:include>

	<form action="${pageContext.request.contextPath}/reserva/online" method="post">
	
		<div class="interfaceExterna">
			<h3><a href="#">Reserva</a></h3>
			<div>
				<div class="campo">
					<label>Tipo do Apartamento</label>
					<input type="text" name="reserva.apartamento.tipoApartamento.nome" value="${reserva.apartamento.tipoApartamento.nome}" readonly="readonly"/>
				</div>
				
				<div class="campo">
					<label>N&uacute;mero</label>
					<input type="text" name="reserva.apartamento.numero" value="${reserva.apartamento.numero}" readonly="readonly"/>
				</div>
				
				<br clear="all" />
				
				<div class="campo">
					<label>Descri&ccedil;&atilde;o</label>
					<input type="text" style="size: 100px;" name="reserva.apartamento.tipoApartamento.descricao" value="${reserva.apartamento.tipoApartamento.descricao}" readonly="readonly"/>
				</div>
				
				<br clear="all" />
				
				<div class="campo">
					<label>Data de Entrada</label>
					<input type="text" id="dataEntrada" name="reserva.dataEntrada" value="<fmt:formatDate value='${reserva.dataEntrada}' pattern='dd/MM/yyyy' />" readonly="readonly"/>
				</div>
				<div class="campo">
					<label>Data de Sa&iacute;da</label>
					<input type="text" id="dataSaida" name="reserva.dataSaida" value="<fmt:formatDate value='${reserva.dataSaida}' pattern='dd/MM/yyyy' />" readonly="readonly"/>
				</div>
				
			</div>
		</div>
		
		<br />
		
		<div class="interfaceExterna">
			<h3><a href="#">H&oacute;spede</a></h3>
			<div>
				<div class="campo">
					<label>Pa&iacute;s</label>
					<select id="pais" name="reserva.hospede.pais.id">
						<c:forEach var="pais" items="${paises}">
							<option value="${pais.id}">${pais.nome}</option>
						</c:forEach>
					</select>
				</div>
				
				<div id="campoCpf" class="campo" style="display: none;">
						<label>CPF</label>
						<input id="cpf" type="text" name="reserva.hospede.cpf" value="${reserva.hospede.cpf}" alt="cpf"/>
				</div>
				<div id="campoPassaporte" class="campo" style="display: none;">
						<label>Passaporte</label>
						<input id="passaporte" type="text" name="reserva.hospede.passaporte" value="${reserva.hospede.passaporte}" />
				</div>
				
				<div>
					<input id="id" type="hidden" name="reserva.hospede.id" value="${reserva.hospede.id}" />
				
					<div class="campo">
						<label>Nome</label>
						<input id="nome" type="text" name="reserva.hospede.nome" value="${reserva.hospede.nome}" />
					</div>
					
					<div class="campo">
						<label>E-mail</label> 
						<input type="text" id="email" name="reserva.hospede.email" value="${reserva.hospede.email}" />
					</div>
				</div>
			
				<div class="campo">
					<label>Telefone</label>
					<input id="telefone" type="text" name="reserva.hospede.telefone" value="${reserva.hospede.telefone}" alt="phone"/>
				</div>
				
				<br clear="all"/>
		
			</div>
			
		</div>
		
		<br clear="all" />
		
		<div class="botoes">
			<input type="submit" value="Confirmar" id="botaoSalvar" />
			<a href="${pageContext.request.contextPath}/reserva" id="botaoVoltar">Voltar</a>
		</div>
	
	</form>

<jsp:include page="../template/bottom.jsp"></jsp:include>
<script type="text/javascript">
$(document).ready(function () {
	function carregaHospede(hospede) {
		$('#id').val(hospede.id);
		$('#email').val(hospede.email);
		$('#nome').val(hospede.nome);
		if (hospede.pais) {
			$('#pais option[value='+ hospede.pais +']');
		} else {
			$('#pais option[value=0]');
		}
		$('#paises');
		defineDocumento();
		$('#cpf').val(hospede.cpf);
		$('#passaporte').val(hospede.passaporte);
		$('#telefone').val(hospede.telefone)
	}
	
	function limpaCampos() {
		$('#id').val('');
		$('#nome').val('');
		$('#pais option[value=0]').attr('selected', 'selected');
		$('#pais');
		defineDocumento();
		$('#cpf').val('');
		$('#passaporte').val('');
	}
	
	$('#cpf').blur(function () {
		$.ajax({
			url: '${pageContext.request.contextPath}/hospede/brasileiro/' + $('#cpf').val(),
			success: carregaHospede
		});
	});
	
	$('#passaporte').blur(function () {
		$.ajax({
			url: '${pageContext.request.contextPath}/hospede/estrangeiro/'+ $('#pais').val() + '/' + $('#passaporte').val(),
			success: carregaHospede
		});
	});
	
	function defineDocumento() {
		if($('#pais').val() == '0') {
			$('#campoCpf').css('display', 'block');
			$('#campoCpf').removeAttr('disabled');
			$('#campoPassaporte').css('display', 'none');
			$('#campoPassaporte').attr('disabled', 'disabled');
		} else {
			$('#campoCpf').css('display', 'none');
			$('#campoCpf').attr('disabled', 'disabled');
			$('#campoPassaporte').css('display', 'block');
			$('#campoPassaporte').removeAttr('disabled');
		}
	}
	$('#pais option[value=${reserva.hospede.pais.id}]').attr('selected', 'selected');
	defineDocumento();
	$('#pais').change(defineDocumento);
});
</script>